<template>
    <div class="infinite-list-wrapper">
        <div
            class="card-container"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled"
        >
            <el-card
                v-for="contact in processedContacts"
                :key="contact.contactId"
                class="list-item"
                @click.native="handleClick(contact)"
            >
                <div slot="header" class="clearfix">
                    <span> {{ contact.truncatedName }}</span>
                    <span class="right-align">{{ contact.displayDate }}</span>
                </div>
                <div>
                    <span>{{ contact.truncatedContent }}</span>
                </div>
            </el-card>
        </div>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p>
    </div>
</template>

<script>
import { Message } from 'element-ui'

export default {
    data() {
        return {
            count: 7,
            contactCount: '',
            loading: false,
            contacts: [
                {
                    contactId: '',
                    contactName: '',
                    messageContent: '',
                    messageDate: '',
                    messageTime: '',
                    messageContact: ''
                }
            ],
            userData: {
                id: '',
                userType: ''
            },
            timer: ''
        }
    },
    computed: {
        noMore() {
            return this.count >= this.contactCount
        },
        disabled() {
            return this.loading || this.noMore
        },
        processedContacts() {
            return this.contacts.map((contact) => {
                const today = new Date().toISOString().split('T')[0]
                const isToday = contact.messageDate === today
                return {
                    ...contact,
                    truncatedName:
                        contact.contactName?.length > 15
                            ? contact.contactName.substring(0, 15) + '...'
                            : contact.contactName,
                    truncatedContent:
                        contact.messageContent?.length > 20
                            ? contact.messageContent.substring(0, 20) + '...'
                            : contact.messageContent,
                    displayDate: isToday
                        ? contact.messageTime
                        : contact.messageDate
                }
            })
        }
    },
    mounted() {
        this.$axios.post('/contact/allContact', this.userData).then((resp) => {
            this.contacts = resp.data
        })
        this.$axios
            .post('/contact/contactCount', this.userData)
            .then((resp) => {
                this.contactCount = resp.data
            })
    },
    methods: {
        load() {
            this.loading = true
            setTimeout(() => {
                this.count += 7
                this.loading = false
            }, 500)
        },
        handleClick(contact) {
            this.$store.commit('setMessageContact', contact.messageContact)
            Message({
                message: `Card ${contact.messageContact} clicked!`,
                type: 'success'
            })
        },
        showContact() {
            this.$axios
                .post('/contact/allContact', this.userData)
                .then((resp) => {
                    this.contacts = resp.data
                })
            this.$axios
                .post('/contact/contactCount', this.userData)
                .then((resp) => {
                    this.contactCount = resp.data
                })
        },
        setTime() {
            this.timer = setInterval(() => {
                this.showContact()
            }, 1000)
        }
    },
    created() {
        this.userData.id = this.$store.state.id
        this.userData.userType = this.$store.state.userType
        this.setTime()
    }
}
</script>

<style>
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.list-item {
    width: 100%;
}

.el-card {
    min-width: 380px;
    margin-right: 20px;
    transition: all 0.5s;
}
.el-card:hover {
    margin-top: -5px;
    background-color: #f1f1f1;
}

.clearfix {
    display: flex;
    justify-content: space-between;
}

.right-align {
    text-align: right;
}
</style>
